﻿<script src="~/Content/js/plugs/echarts-2.2.7/echarts-all.js" type="text/javascript"></script>
<script src="~/Content/js/baseEchartOption.js" type="text/javascript"></script>
<link href="~/Content/css/scanTemplate.css" rel="stylesheet" />



<div class="page" style="position:relative;">
</div>
<header class="bar bar-nav">
    <h1 class="title">销售额</h1>
</header>

<div class="content">
    <div class="list-block">
        <ul>
            <li id="showSaleAmount">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">销售额</div>
                        <div class="item-input">
                            <span></span>
                        </div>
                    </div>
                </div>
            </li>


            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">开始时间</div>
                        <div class="item-input">
                            <input type="date" placeholder="开始时间" id="beginTime" value="@DateTime.Now.ToString("yyyy-MM-dd")">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">结束时间</div>
                        <div class="item-input">
                            <input type="date" placeholder="结束时间" id="endTime" value="@DateTime.Now.ToString("yyyy-MM-dd")">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">所属平台</div>
                        <div class="item-input">
                            <select id="plateformType">
                                <option value="-1">全部</option>
                                <option value="0">实体</option>
                                <option value="1">电商</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <p><a href="#" class="button button-fill button-big button-success" onclick="saleAmountTendency()">查询</a></p>
            </li>
        </ul>
    </div>

    <div class="echartTitle">销售额汇总</div>
    <div id="sale_amount_total_tendency_div" class="analysisBox">
        <div id="sale_amount_total_tendency" class="analysisContainer"></div>
    </div>

    <div class="echartTitle">销售额详情</div>
    <div id="sale_amount_tendency_div" class="analysisBox">
        <div id="sale_amount_tendency" class="analysisContainer"></div>
    </div>

    <div id="detailData">

    </div>
</div>

<script type="text/javascript">
    var sale_amount_tendency = echarts.init(document.getElementById('sale_amount_tendency'));
    var sale_amount_total_tendency = echarts.init(document.getElementById('sale_amount_total_tendency'));
    var sale_amount_tendency_option = null;
    var sale_amount_total_tendency_option = null;
    var nameList = null;

    function saleAmountTendency() {
        $.showPreloader('Loading...');
        var beginTime = $("#beginTime").val();
        var endTime = $("#endTime").val();
        var plateformType = $("#plateformType").val();

        $.post("/Scan/GetSaleChart", { beginTime: beginTime, endTime: endTime, plateformType: plateformType }, function (result) {
            $.hidePreloader();

            sale_amount_tendency.clear();
            sale_amount_total_tendency.clear();
            sale_amount_tendency_option = null;
            sale_amount_total_tendency_option = null;
            nameList = null;

            var msg = result.Msg;
            var body = result.Body;
            nameList = body.NameList;
            var legendList = body.LegendList;
            var legendList2 = new Array();
            legendList2.push(legendList[0]);
            var dataList = body.DataList;
            var title = "";
            var dataListForBar = new Array();
            var dataListForLine = new Array();
            var total = 0;

            if (msg == "1") {
                //多日数据
                dataListForBar.push(dataList[0]);
                dataListForBar.push(dataList[2]);
                dataListForLine.push(dataList[1]);

                var index = dataList[1].length - 1;
                total = dataList[1][index];
            } else if (msg == "2") {
                //单日数据
                dataListForBar.push(dataList[0]);
                dataListForBar.push(dataList[1]);

                dataListForLine.push(dataList[2]);
                dataListForLine.push(dataList[3]);

                var index = dataList[2].length - 1;
                total = dataList[2][index];
            }
            if (msg == "1") {
                sale_amount_tendency_option = getBarAndLineOption(title, legendList, nameList, dataListForBar, false, true);
                sale_amount_total_tendency_option = getLineOption(title, legendList2, nameList, dataListForLine, true, false, false);
            } else if (msg == "2") {
                sale_amount_tendency_option = getBarOption(title, legendList, nameList, dataListForBar, true, false, false);
                sale_amount_total_tendency_option = getLineOption(title, legendList, nameList, dataListForLine, true, false, false);
            }
            sale_amount_tendency.setOption(sale_amount_tendency_option);


            sale_amount_total_tendency.setOption(sale_amount_total_tendency_option);

            $("#showSaleAmount span").text(total);

            var htmlContent = "";
            if (msg == "1") {
                htmlContent = '<table id="dayDetail">' +
                   '<thead>' +
                       '<tr>' +
                           '<td>时间</td>' +
                           '<td>销售额</td>' +
                           '<td>较前日</td>' +
                       '</tr>' +
                   '</thead>' +
                   '<tbody>';

                for (var i = nameList.length - 1; i >= 0; i--) {
                    var timeStr = nameList[i];
                    var income = dataListForBar[0][i];
                    var rate = dataListForBar[1][i];

                    htmlContent += '<tr>' +
                                   '<td>' + timeStr + '</td>' +
                                   '<td>' + income + '</td>' +
                                   '<td>' + rate + '%</td>' +
                                '</tr>';
                }

                htmlContent += '</tbody></table>';
            } else {
                htmlContent = ' <table id="timeDetail">' +
                    '<thead>' +
                        '<tr>' +
                            '<td>时段</td>' +
                            '<td>当日</td>' +
                            '<td>前日</td>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody>';

                var now = new Date();
                var nowHour = now.getHours();
                var nowMonth_ = now.getMonth() + 1;
                var nowDate_ = now.getDate();
                var nowDate = nowDate_ < 10 ? "0" + nowDate_ : nowDate_ + "";
                var nowMonth = nowMonth_ < 10 ? "0" + nowMonth_ : nowMonth_ + "";
                var nowString = now.getFullYear() + '-' + nowMonth + '-' + nowDate;

                for (var i = nameList.length - 1; i >= 0; i--) {
                    if (beginTime == nowString) {
                        //当天
                        var time = parseInt(nameList[i].substring(0, nameList[i].indexOf(":")));
                        if (nowHour >= time) {
                            var timeStr = nameList[i];
                            var incomeNow = dataListForBar[0][i];
                            var incomeBefore = dataListForBar[1][i];

                            htmlContent += '<tr>' +
                                            '<td>' + timeStr + '</td>' +
                                            '<td>' + incomeNow + '</td>' +
                                             '<td>' + incomeBefore + '</td>' +
                                         '</tr>';
                        }
                    } else {
                        var timeStr = nameList[i];
                        var incomeNow = dataListForBar[0][i];
                        var incomeBefore = dataListForBar[1][i];

                        htmlContent += '<tr>' +
                                        '<td>' + timeStr + '</td>' +
                                        '<td>' + incomeNow + '</td>' +
                                         '<td>' + incomeBefore + '</td>' +
                                     '</tr>';
                    }
                }

                htmlContent += '</tbody></table>';
            }
            $("#detailData").html(htmlContent);
        })

        sale_amount_tendency.on("click", function (params) {
            var start = parseInt((100 / nameList.length) * (params.dataIndex - 3));
            if (start < 0) {
                start = 0;
            }
            var end = parseInt((100 / nameList.length) * (params.dataIndex + 3));
            if (end > 100) {
                end = 100;
            }

            sale_amount_tendency.clear();

            sale_amount_tendency_option.dataZoom.start = start;
            sale_amount_tendency_option.dataZoom.end = end;

            sale_amount_tendency.setOption(sale_amount_tendency_option);

        });

        sale_amount_total_tendency.on("click", function (params) {
            var start = parseInt((100 / nameList.length) * (params.dataIndex - 3));
            if (start < 0) {
                start = 0;
            }
            var end = parseInt((100 / nameList.length) * (params.dataIndex + 3));
            if (end > 100) {
                end = 100;
            }

            sale_amount_total_tendency.clear();

            sale_amount_total_tendency_option.dataZoom.start = start;
            sale_amount_total_tendency_option.dataZoom.end = end;

            sale_amount_total_tendency.setOption(sale_amount_total_tendency_option);

        });
    }

    $(function () {
        saleAmountTendency();
    })

</script>

